// 添加和编辑 行业协会弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin,InputNumber  } from 'antd'
import { connect } from 'react-redux'
/* 引用接口文档路径 */
import {
  addIndustryAssociation,editIndustryAssociation
} from 'actions/companyManage'
const FormItem = Form.Item
import Ueditor from '../../components/Ueditor'
import City from '../../components/city.js'
@Form.create({
    mapPropsToFields(props) {
      return {
        guildName: Form.createFormField({
          ...props.content,
          value: props.content.guildName,
        }),
        guildRegion: Form.createFormField({
          ...props.content,
          value: props.content.guildRegion,
        }),
        guildAddress: Form.createFormField({
          ...props.content,
          value: props.content.guildAddress,
        }),
        guildMobile: Form.createFormField({
          ...props.content,
          value: props.content.guildMobile,
        }),
  
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
  })
)


export default class ModalAddIndustryAssociation extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addImgUrl:'',//图片地址
        provinceid:"",//省市ID
        loading:false
      }
    }

    addReportSubmit(callback,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(!this.state.provinceid){
                  message.error('请选择所属地域');
                  return;
                }
                if(!this.state.addImgUrl){
                  message.error('请上传协会图标');
                  return;
                }
                if(UE.getEditor('content').getContent() == '' || UE.getEditor('content').getContent().length == 0){
                  message.error('请输入协会说明');
                  return;
                }
                if(this.props.type == 1){
                  var datajson = {
                      "guildName":values.guildName,//协会名称
                      "guildRegion":this.state.provinceid,//协会地域
                      "guildLogo":this.state.addImgUrl,//协会logo
                      "guildExplain":UE.getEditor('content').getContent(),//报告内容
                      "guildAddress":values.guildAddress,//协会地址
                      "guildMobile":values.guildMobile,//协会电话
                  }
                  //新增              
                  this.props.dispatch(addIndustryAssociation(
                  datajson,
                  (respose) => {
                      callback&&callback()
                      this.setState({
                          addImgUrl:"",
                      })
                      message.success(respose.respMsg);
                      this.props.ModalCancel();
                  }))
                }else{
                    var datajson = {
                        "id":this.props.content.id,//协会ID
                        "guildName":values.guildName,//协会名称
                        "guildRegion":this.state.provinceid,//协会地域
                        "guildLogo":this.state.addImgUrl,//协会logo
                        "guildExplain":UE.getEditor('content').getContent(),//报告内容
                        "guildAddress":values.guildAddress,//协会地址
                        "guildMobile":values.guildMobile,//协会电话
                    }
                    //编辑
                    this.props.dispatch(editIndustryAssociation(
                    datajson,
                    (respose) => {
                        callback&&callback()
                        this.setState({
                            addImgUrl:"",
                        })
                        message.success(respose.respMsg);
                        this.props.ModalCancel();
                    })) 
                }                                
            }
        });       
    }
  componentWillMount(){
    this.setState({
      guildExplain:this.props.content.guildExplain,
      addImgUrl: this.props.content.guildLogo,
      provinceid:this.props.content.guildRegionId,
    })
  }
    // 城市选择框选中的值
    getStateprovince(provinceid){
      this.setState({
        provinceid:provinceid
      })
    }
    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"2"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                  loading:true,
              })   
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
                      
              }
              if (info.file.status === 'done') {
                /* 把返回的路径赋值过去 */
                this.setState({
                    addImgUrl: info.file.response.respData,
                    loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
          labelCol: {
          //   xs: { span: 24},
              sm: { span: 3 },
          },
          wrapperCol: {
          //   xs: { span: 24 },
              sm: { span: 20 },
          },
        };
        return (
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增协会" : "编辑协会" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                destroyOnClose={true}
            >
              <Form >
                <FormItem label="协会名称" {...formItemLayout}>
                  {
                    getFieldDecorator('guildName', {
                    rules: [{
                        required: true,message:"请输入协会名称"
                      }],
                    })(
                      <Input placeholder="请输入关键字" disabled={this.state.isChoose}  size="default" style={{ width: '180px' }} />
                    )
                  }                 
                </FormItem>
                <FormItem label="所属地域" {...formItemLayout}>
                  {
                    getFieldDecorator('guildRegion', {
                    rules: [{
                        required: false,message:"请选择所属地域"  
                      }],
                    })(
                      <City province={this.state.provinceid} stateprovince={this.getStateprovince.bind(this)}/>
                    )
                  }  
                </FormItem>
                <FormItem label="协会图标" style={{display:"block"}} {...formItemLayout}>
                    <Spin spinning={this.state.loading} style={{width:"80px"}}>
                      <img style={{width:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                          src={ this.state.addImgUrl ? this.state.addImgUrl :require('../../images/baseImg.png') }
                      />
                    </Spin>
                    <Upload {...uploadImg}>                
                        <Button>点击选择图片</Button>
                    </Upload>  
                </FormItem>
                <FormItem label="协会说明" {...formItemLayout}>
                      <Ueditor  id="content" value={this.state.guildExplain} height="200" />
                </FormItem>
                <FormItem label="详情地址" {...formItemLayout}>
                  {
                    getFieldDecorator('guildAddress', {
                    rules: [{
                        required: true,message:"请输入详情地址"
                      }],
                    })(
                      <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }  
                </FormItem>
                <FormItem label="联系电话" {...formItemLayout}>
                  {
                    getFieldDecorator('guildMobile', {
                    rules: [
                      {
                        validator(rules, value, callback){                          
                          if (!value) {
                            callback(new Error('请输入联系电话'));
                          }else if(/\D/g.test(value)){
                            callback(new Error('请输入正确的联系电话'));
                          }else{
                            callback();
                          }
                        }
                      }
                    ],
                    })(
                      <Input type="number" placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }  
                </FormItem>
              </Form>
          </Modal>
        )
    }
}